<script setup>
import { ref, reactive } from 'vue'
import { staff, updstaff } from '@/api/basi.js'
const checked1 = ref(true)

const addressForm = reactive({
	user_status: 'true',
	user_secret: '',
	customer_status: '',
	user_tokent: '',
	user_aes: '',
	staff_callback_url: ''
})
const staffapi = () => {
	staff().then((res) => {
		addressForm.user_status = res.data.user_status == 1 ? true : false
		addressForm.user_secret = res.data.user_secret
		addressForm.customer_status = res.data.customer_status
		addressForm.user_tokent = res.data.user_tokent
		addressForm.user_aes = res.data.user_aes
		addressForm.staff_callback_url = res.data.staff_callback_url
	})
}

staffapi()
const abc = (val) => {
	const range = document.createRange() //创建range对象
	range.selectNode(document.getElementById(val)) //获取复制内容的 id 选择器
	const selection = window.getSelection() //创建 selection对象
	if (selection.rangeCount > 0) selection.removeAllRanges() //如果页面已经有选取了的话，会自动删除这个选区，没有选区的话，会把这个选取加入选区
	selection.addRange(range) //将range对象添加到selection选区当中，会高亮文本块
	document.execCommand('copy') //复制选中的文字到剪贴板
	// this.$toast('复制成功')
	ElMessage({
		message: '复制成功',
		type: 'success'
	})
	selection.removeRange(range) // 移除选中的元素
}
const preservation = (val) => {
	console.log(val)
	updstaff({
		user_tokent: addressForm.user_tokent,
		user_aes: addressForm.user_aes,
		user_secret: addressForm.user_secret
	}).then((res) => {
		ElMessage({
			message: res.msg,
			type: 'success'
		})
	})
}
defineExpose({
	preservation
})
</script>
<template>
	<div class="cardContent">
		<div class="cardTabTop">
			<div class="cardTabTop1"></div>
			<div class="cardTabTop2">密钥配置</div>
		</div>
		<div class="cardFormStyle">
			<el-form :model="addressForm" label-width="120px" style="margin-top: -5px">
				<el-form-item label="通讯录配置">
					<el-checkbox v-model="addressForm.user_status" :label="checked1 ? '正常' : '异常'" size="large" />
				</el-form-item>
				<el-form-item label="通讯录Secret">
					<el-input v-model="addressForm.user_secret" />
				</el-form-item>
				<!-- <el-form-item label="立即执行同步">
          <el-switch v-model="addressForm.customer_status" />
        </el-form-item> -->
			</el-form>
		</div>
	</div>
	<!-- 回调配置 -->
	<div class="cardContent">
		<div class="cardTabTop">
			<div class="cardTabTop1"></div>
			<div class="cardTabTop2">回调配置</div>
		</div>
		<!-- 正文 -->
		<div class="cardFormStyle2">
			<el-form :model="addressForm" label-width="120px" style="margin-top: -5px">
				<el-form-item label="URL">
					<el-input
						id="urlvalue"
						v-model="addressForm.staff_callback_url"
						placeholder="https://demo.leadshop.vip/index.php?r=admin%2Findex#/store/color"
					>
						<template #append
							><el-button style="background-color: #208eff; color: #ffffff" @click="abc('urlvalue')"
								>复制</el-button
							></template
						>
					</el-input>
				</el-form-item>

				<el-form-item label="Token">
					<el-input id="tokent" v-model="addressForm.user_tokent" placeholder="admin%2Findex#/store/color">
						<template #append
							><el-button style="background-color: #208eff; color: #ffffff" @click="abc('tokent')"
								>复制</el-button
							></template
						>
					</el-input>
				</el-form-item>

				<el-form-item label="EncodingAESKey">
					<el-input id="user_aes" v-model="addressForm.user_aes" placeholder="?r=admin%2Findex#/store/color">
						<template #append
							><el-button style="background-color: #208eff; color: #ffffff" @click="abc('user_aes')"
								>复制</el-button
							></template
						>
					</el-input>
				</el-form-item>
			</el-form>
		</div>
	</div>
</template>
<style scoped>
.cardContent {
	background: #ffffff;
	margin-top: 20px;
	box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.04);
	border-radius: 8px;
}

.el-form-item {
	margin-bottom: 24px;
}

.cardTabTop {
	height: 66px;
	display: flex;
	margin-left: 25px;
	margin-top: 24px;
	padding-top: 23px;
	justify-content: flex-start;
}

.cardTabTop1 {
	width: 4px;
	height: 14px;
	background: #208eff;
}

.cardTabTop2 {
	width: 56px;
	height: 14px;
	margin-left: 5px;
	font-size: 14px;
	font-family: PingFang-SC-Medium, PingFang-SC;
	font-weight: 500;
	color: #333333;
	line-height: 14px;
}
.cardFormStyle {
	width: 440px;
	padding-bottom: 24px;
	margin-left: 115px;
}
.cardFormStyle2 {
	width: 680px;
	padding-bottom: 24px;
	margin-left: 115px;
}

/* :deep(  .el-checkbox__label + .el-checkbox__inner){
  margin-top: -8px;
  color: #15b33c;
 } */
:deep(.el-checkbox__label) {
	font-size: 16px;
	font-weight: 500;
	margin-top: -6px;
}

:deep(.el-checkbox__input) {
	margin-top: -6px;
}
</style>
